<template>
  <div class="itemPage">
    <!-- 头部图片 -->
    <div class="head_img">
      <img :src="goodInfo.image_list[1]" alt="">
    </div>
    <div class="text_info fff">
      <p class="item_title">{{ goodInfo.name }}</p>
      <p class="express">{{is_share==='yes'?'已分享':'分享页面运费减半'}}<span>邮费：{{ is_share==='yes'?goodInfo.package[1].discount_price:goodInfo.package[1].price }}</span></p>
      <div class="item_counttime flex">
        <span v-show="countShow == 1">距离结束：{{ day }}天{{ hour }}小时{{ minute }}分{{ second }}秒</span>
        <span v-show="countShow == 0">活动已结束</span>
        <span v-show="countShow == 2">活动还未开始</span>
        <!-- <span style="color: #5C5C5C;">邮费：自付</span> -->
      </div>
      <!-- 进度条 -->
      <div class="project_progress_wrap fff">
        <div class="project_progress">
          <div class="ppContent" :style="{ width: goodInfo.percent > 100 ? 100 + '%' : goodInfo.percent + '%' }"></div>
        </div>
        <!-- 进度条指示标 -->
        <div class="plan" :style="{left: goodInfo.percent > 92 ? 92 + '%' :(goodInfo.percent - 1)+ '%' }"><span>{{ goodInfo.percent}}%</span></div>
      </div>
      <!-- 项目数据 -->
      <div class="projectData fff">
        <!-- 剩余 -->
        <div class="residue">
          <span>今日剩余{{ goodInfo.buy_limit_number_everyday - goodInfo.buy_number }}份</span>
        </div>
        <!-- 已领 -->
        <div class="yet">
          <span>已领{{ goodInfo.buy_number }}份</span>
        </div>
        <!-- 限量 -->
        <div class="limit">
          <span>限量{{ goodInfo.buy_limit_number_everyday }}份/天</span>
        </div>
      </div>
    </div>
    <div class="flow_chart fff">
      <p class="chart_text">试饮流程<span @click="roleIsShow=true">试饮规则<b class="iconfont icon-you"></b></span></p>
      <div class="chart flex">
        <div class="iconfont icon-you">
          <span>1</span>
          <p>符合规则</p>
        </div>
        <div class="iconfont icon-you">
          <span>2</span>
          <p>申请试饮</p>
        </div>
        <div>
          <span>3</span>
          <p>提交试饮报告</p>
        </div>
      </div>
    </div>
    <div class="tabbar flex" :class="{ fixd: tabbarFixd }" ref="tabbar">
      <div @click="tab = 1">
        <span :class="{active: tab == 1}">试饮品信息</span>
      </div>
      <div @click="tab = 2">
        <span :class="{active: tab == 2}">试饮报告</span>
      </div>
    </div>
    <div class="content" v-html="goodInfo.detail" v-show="tab == 1">
    </div>
    <comments v-show="tab == 2" :goodid="good_id" :code="code"></comments>
    <footer class="flex">
      <div class="flex" @click="shareShow=true">
        <span class="iconfont icon-fenxiang"></span>  
        <p>分享</p> 
      </div> 
      <input type="button" value="免费领取" @click="order">
    </footer>
    <router-link tag="div" to="/order" class="orderDesc">
      <span class="iconfont icon-dingdan"></span>
      <span>我的订单</span>
    </router-link>
    <img src="@/assets/share.png" alt="" class="shareImg" v-show="shareShow" @click="shareShow=false">
    <div class="role" v-show="roleIsShow" @click="roleIsShow=false">
      <div>
        <h1>试饮规则</h1>
        <p>1. 每天晚上8点免费试饮活动开始开放 </p>
        <p>2. 每天只开放10个名额 名额有限，领完为止 </p>  
        <p>3. 每人限领一次</p>
      </div>
    </div>
    <shade v-show="loadShow"/> 
  </div>
</template>

<script>
import wx from "weixin-js-sdk";
import login from "@/utils/login";
import getCode from "@/utils/getCode";
import getUrlParams from "@/utils/getUrlParams.js";
import {
  countView,
  getSign,
  userShareGoodInfo,
  getUserByUid
} from "@/api/index";
import { getTeaSamplesInfo } from "@/api/chayang";
import comments from "./components/comments";
export default {
  data() {
    return {
      goodInfo: {
        image_list: [],
        package: {
          "1": {
            discount_price: "",
            price: ""
          }
        }
      },
      roleIsShow: false,
      countShow: "",
      countTime: "",
      residue: "",
      day: "",
      hour: "",
      minute: "",
      second: "",
      tab: 1,
      shareShow: false,
      good_id: this.$route.query.good_id,
      loadShow: true,
      tabbarFixd: false,
      is_share: "no",
      fristEnter: false,
      code: "",
      employee: "n",
      urlParams: {}
    };
  },
  async created() {
    getUrlParams(this);
    await login(this);
    getCode(this);
    if (this.fristEnter) {
      return false;
    }
    this.$store.commit("SETURLPARAMS", this.$route.query);
    getTeaSamplesInfo(this.good_id).then(results => {
      this.is_share = results.data.is_share;
      this.$store.commit("SETROOTMENUID", results.data.root_menu_id);
      this.$store.commit("SETPAGEINFO", {
        title: results.data.name,
        description: results.data.feature
      });
      this.goodInfo = results.data;
      this.goodInfo.percent =
        results.data.buy_number / results.data.buy_limit_number_everyday * 100 >
        100
          ? 100
          : results.data.buy_number /
            results.data.buy_limit_number_everyday *
            100;
      const now = new Date().getTime();
      let endDate = new Date(
        results.data.end_time.replace(/-/g, "/")
      ).getTime();
      let startDate = new Date(
        results.data.start_time.replace(/-/g, "/")
      ).getTime();
      switch (true) {
        case endDate < now:
          this.countShow = 0;
          this.loadShow = false;
          break;
        case now < endDate && now > startDate:
          this.countShow = 1;
          this.residue = (endDate - now) / 1000;
          this.day = Math.floor(this.residue / 3600 / 24) + "";
          this.hour = Math.floor((this.residue / 3600) % 24) + "";
          this.minute = Math.floor((this.residue % 3600) / 60) + "";
          this.second = Math.floor((this.residue % 3600) % 60) + "";
          this.loadShow = false;
          break;
        case now < startDate:
          this.loadShow = false;
          this.countShow = 2;
          break;
      }
      this.countTime = setInterval(() => {
        this.residue--;
        this.day = Math.floor(this.residue / 3600 / 24) + "";
        this.hour = Math.floor((this.residue / 3600) % 24) + "";
        this.minute = Math.floor((this.residue % 3600) / 60) + "";
        this.second = Math.floor((this.residue % 3600) % 60) + "";
      }, 1000);
      let view = this.$store.state.urlParams;
      view.pid = this.good_id;
      view.page_url = location.href;
      countView(this.$store.state.urlParams);
    });
    getSign(location.href.split("#")[0]).then(res => {
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: res.data.appId, // 必填，公众号的唯一标识
        timestamp: res.data.timestamp, // 必填，生成签名的时间戳
        nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
        signature: res.data.signature, // 必填，签名
        jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"] // 必填，需要使用的JS接口列表
      });
    });
    getUserByUid(this.$store.state.openid).then(res => {
      this.employee = res.data.employee;
      wx.ready(() => {
        var _this = this;
        wx.onMenuShareTimeline({
          title: document.title, // 分享标题
          link:
            this.employee === "n"
              ? location.href +
                "&ad=userShareGood&share_user_openid=" +
                this.$store.state.openid
              : location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: this.goodInfo.image, // 分享图标
          success() {
            userShareGoodInfo(_this.good_id).then(result => {
              if (result.data.success === "yes") {
                _this.$toast({
                  message: "分享成功",
                  iconClass: "iconfont icon-dagou_wuquan"
                });
                getTeaSamplesInfo(_this.good_id).then(results => {
                  _this.is_share = results.data.is_share;
                });
              }
            });
          }
        });
        wx.onMenuShareAppMessage({
          title: document.title, // 分享标题
          desc: this.goodInfo.feature, // 分享描述
          link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: this.goodInfo.image, // 分享图标
          type: "", // 分享类型,music、video或link，不填默认为link
          dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
          success: function() {}
        });
      });
      wx.error(function(res) {});
    });
  },
  mounted() {
    window.addEventListener("scroll", () => {
      const windowScrollTop =
        document.body.scrollTop || document.documentElement.scrollTop;
      const tabbarscrollTop = this.$refs.tabbar.offsetTop - windowScrollTop;
      if (tabbarscrollTop < 0) {
        this.tabbarFixd = true;
        // document.body.scrollTop = 0;
      } else {
        this.tabbarFixd = false;
      }
    });
  },
  components: {
    comments
  },
  methods: {
    order() {
      // if (this.goodInfo.buy_limit_number_everyday === this.goodInfo.buy_number) {
      //   this.$messagebox.alert('对不起，今天的份额已经领完，明晚8点早点来哦!');
      //   return false;
      // }
      // const endTime = new Date(this.goodInfo.end_time.replace(/-/g, "/")).getTime();
      // const startTime = new Date(this.goodInfo.start_time.replace(/-/g, "/")).getTime();
      // const nowTime = new Date().getTime();
      // if(endTime < nowTime) {
      //   this.$messagebox.alert('本期已结束，请参与其他活动！');
      //   return false;
      // }
      // if(nowTime < startTime) {
      //   this.$messagebox.alert(`活动还未开始，开始时间为:<br>${this.goodInfo.start_time}`);
      //   return false;
      // } else {
      //   if( (nowTime / 1000 / 3600 + 8 ) % 24  < 20){
      //     this.$messagebox.alert('现在不是领取时间，晚上8点再来哦');
      //     return false;
      //   }
      // }
      this.$router.push({
        name: "确认领取",
        params: {
          good_id: this.good_id,
          is_share: this.is_share
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/base.scss";
.itemPage {
  width: 100%;
  margin-bottom: to(13);
  padding-bottom: to(85);
  .head_img {
    position: relative;
    img {
      width: 100%;
      height: to(305);
      display: block;
    }
    p {
      position: absolute;
      bottom: 0;
      left: 0;
      height: to(44);
      line-height: to(44);
      width: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      color: white;
      text-indent: to(15);
    }
  }
  .text_info {
    padding: 0 to(12);
    .item_title {
      color: #720000;
      font-size: to(28);
      line-height: to(50);
      margin-top: to(15);
    }
    .express {
      line-height: to(55);
      color: #ff0000;
      font-size: to(22);
      span {
        color: #5c5c5c;
        margin-left: to(30);
      }
    }
    .item_counttime {
      font-size: to(22);
      line-height: to(50);
      justify-content: space-between;
      span {
        &:nth-child(1) {
          color: #000;
          flex: 8;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          font-weight: 500;
        }
      }
    }
    // 项目标签
    .tags {
      margin: to(10) 0;
      li {
        background-color: #d4d4d4;
        color: #525252;
        padding: to(2) to(18);
        border-radius: to(5);
        margin: to(0) to(8);
        line-height: to(36);
        font-size: to(18);
        text-align: center;
      }
    }
    // 进度条
    .project_progress_wrap {
      width: 100%;
      padding: to(20) to(0) to(30);
      box-sizing: border-box;
      position: relative;
      .plan {
        position: absolute;
        width: to(60);
        line-height: to(38);
        height: to(38);
        border: 1px solid #ff7878;
        background-color: #fff;
        color: #df4d4d;
        top: to(8);
        right: 0;
        font-size: to(60);
        border-radius: to(10);
        span {
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          font-size: to(18);
          line-height: to(38);
          color: #df4d4d;
          text-align: center;
        }
      }
      .project_progress {
        width: 100%;
        height: to(14);
        background-color: #d9d9d9;
        // border: to(2) solid #c63d3d;
        border-radius: to(5);
        box-sizing: border-box;
        div {
          width: 50%;
          height: 100%;
          background-color: #ff7878;
          border-radius: to(5) 0 0 to(5);
        }
      }
      // 数据
      .projectData {
        display: flex;
        div {
          flex: 1;
          height: to(60);
          &.yet {
            span {
              color: #e90505;
            }
          }
          span {
            font-size: to(22);
            display: block;
            text-align: center;
            color: #000;
            line-height: to(40);
          }
        }
      }
    }
    // 数据
    .projectData {
      display: flex;
      div {
        flex: 1;
        height: to(60);
        &.yet {
          span {
            color: #e90505;
          }
        }
        span {
          font-size: to(22);
          display: block;
          text-align: center;
          color: #000;
          line-height: to(40);
        }
      }
    }
  }
  .flow_chart {
    margin: to(15) 0;
    .chart_text {
      font-size: to(26);
      padding: 0 to(12);
      line-height: to(60);
      overflow: hidden;
      span {
        color: #5f0d0d;
        font-size: to(22);
        float: right;
        b {
          font-size: to(22);
        }
      }
    }
    .chart {
      height: to(130);
      div {
        flex: 1;
        position: relative;
        padding-top: to(80);
        &.icon-you:before {
          position: absolute;
          right: 0;
          transform: translateX(50%);
          top: 24%;
          font-size: to(28);
        }
        span {
          position: absolute;
          left: 50%;
          top: to(20);
          transform: translateX(-50%);
          width: to(43);
          height: to(43);
          line-height: to(43);
          text-align: center;
          // text-indent: to(-5);
          background-color: #ededed;
          border-radius: 50%;
          font-size: to(28);
          font-style: italic;
          color: #616161;
          border: 1px solid #ccc;
        }
        p {
          font-size: to(18);
          text-align: center;
        }
      }
    }
  }
  .tabbar {
    background-color: #fcfcfc;
    height: to(64);
    margin-bottom: 2px;
    &.fixd {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
      width: 100%;
    }
    div {
      flex: 1;
      text-align: center;
      padding: 0 to(80);
      span {
        display: block;
        line-height: to(64);
        font-size: to(24);
        &.active {
          border-bottom: 2px solid #5f0909;
          box-sizing: border-box;
          color: #5f0909;
        }
      }
    }
  }
  .content {
    & /deep/ p {
      margin: 0;
      img {
        width: 100%;
        display: block;
      }
    }
  }
  footer {
    position: fixed;
    z-index: 99;
    bottom: 0;
    height: to(85);
    width: 100%;
    padding-left: to(85);
    box-sizing: border-box;
    div {
      background-color: #fff;
      position: absolute;
      left: 0;
      width: to(85);
      height: to(85);
      flex-direction: column;
      padding: to(10) 0;
      span {
        font-size: to(40);
        text-align: center;
        color: #df4d4d;
      }
      p {
        font-size: to(20);
        text-align: center;
      }
    }
    input {
      width: 100%;
      height: 100%;
      background-color: #e94b4b;
      border: 0;
      font-size: to(28);
      color: white;
      text-align: center;
    }
  }
  .orderDesc {
    position: fixed;
    right: to(-30);
    bottom: to(227);
    border: 1px solid #ccc;
    // @include border(100,#ccc);
    border-right: 0;
    border-radius: to(50) 0 0 to(50);
    padding: 0 to(50) 0 to(20);
    height: to(70);
    line-height: 0;
    background-color: #fff;
    display: -webkit-flex;
    display: flex;
    z-index: 2;
    span {
      font-size: to(25);
      line-height: to(70);
      flex: 4;
    }
    .iconfont {
      font-size: to(32);
      color: #c63d3d;
      flex: 1;
      margin-right: to(10);
    }
  }
  .shareImg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
  }
  .role {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 99;
    div {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: to(20);
      width: 85%;
      // height: 30%;
      p {
        font-size: to(26);
        text-indent: to(30);
        margin: to(15) 0;
      }
      h1 {
        font-size: to(42);
        text-align: center;
        margin-bottom: to(30);
      }
    }
  }
}
</style>
